<template>
  <div class="el-dialog el-dialog--large __dialog" ref="print">
    <div class="el-dialog__header">
      <div class="title"><p>供货清单 供应商：{{print.gys}}<span>打印时间 {{formatterTime(new Date(), 6)}}</span></p></div>
    </div>
    <div class="el-dialog__body">
      <el-card class="print_card">
      <div slot="header" class="clearfix">
        <span>发货通知</span>
      </div>
      <el-form>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="bh" label="客户名称">
              <span>{{print.kh}}</span>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="mc" label="收货地址">
              <span>{{print.shdz}}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
            <el-form-item prop="bzmc" label="送货方"></el-form-item>
          </el-col>
          <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
            <el-form-item prop="ms" label="采购单号">
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
      <el-card class="print_card">
        <div slot="header" class="clearfix">
          <span>发货单明细</span>
        </div>
        <el-form>
          <el-row>
            <el-form-item prop="tj" label="发货单入库码"></el-form-item>
          </el-row>
          <el-row>
            <el-col :xs="24" :lg="{span: 11, offset: 0}" class="">
              <el-form-item prop="jz" label="制单日期">
                <span>{{print.zdrq}}</span>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :lg="{span: 11, offset: 1}" class="">
              <el-form-item prop="zl" label="发货日期">
                <span>{{print.fhrq}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <el-card class="print_card mx">
        <div slot="header" class="clearfix">
          <span>供货清单明细</span>
        </div>
        <table>
          <tr>
            <th v-for="item in tablePrintComp.th">{{item}}</th>
          </tr>
          <tr v-for="item in tablePrintComp.td">
            <td v-for="i in item">{{i}}</td>
          </tr>
        </table>
      </el-card>
    </div>
  </div>
</template>
<script>
  import {FormatterTime} from '~/plugins/Tools';
  export default {
    props: {
      print: { // menu 树
        type: Object,
        require: true,
      },
      table: { // menu 树
        type: Object,
        require: true,
      },
    },
    computed: {
      tablePrintComp: function () {
        if (!this.table) {
          console.log(1111);
          return {
            th: [],
            td: [],
          };
        }
        let table = this.table;
        let th = [];
        let td = [];
        let length = table.tableColumn;
        let list = table.data;
        table.column.forEach(item => {
          if (th.length < length) {
            th.push(item.label);
          }
        });
        for (let i of list) {
          let step = [];
          table.column.forEach(item => {
            if (step.length < length) {
              step.push(i[item.prop]);
            }
          });
          td.push(step);
        }
        return {
          th,
          td,
        };
      },
    },
    methods: {
      formatterTime: FormatterTime,
    },
  };
</script>

<style scoped lang="scss">
  .menuIcon{
    font-size: 14px;
    margin-right: 10px;
  }
</style>
